<template>
  <div>
    <el-dialog
      :title="info.isAdd ? '添加商品管理' : '编辑商品管理'"
      :visible.sync="info.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="seckInfo" ref="seckInfo">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="seckname">
          <el-input v-model="seckInfo.title"></el-input>
        </el-form-item>
        <el-form-item label="活动日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="seckInfo.begintime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>至
          <el-date-picker
            v-model="seckInfo.endtime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="一级分类" :label-width="formLabelWidth">
          <el-select @change="changeCate(false)" v-model="seckInfo.first_cateid" placeholder="请选择">
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select @change="changeSecond()" v-model="seckInfo.second_cateid" placeholder="请选择">
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类" :label-width="formLabelWidth">
          <el-select v-model="seckInfo.goodsid" placeholder="请选择">
            <el-option
              v-for="item in goodsArr"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="seckInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { seckAdd, getSeckInfo, seckEdit } from "../../request/api";
import { mapActions, mapGetters } from "vuex";
//引入下载好的编辑器
import E from "wangeditor";
import { log } from "util";
export default {
  data() {
    return {
      seckInfo: {
        title: "", //限时秒杀名称
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        begintime: "", //开始时间
        endtime: "", //结束时间
        goodsid: "", //商品编号
        status: 1 //状态1正常2禁用
      },
      formLabelWidth: "120px",
      //dialogVisible 用于控制图片预览的显示隐藏
      dialogVisible: false,
      //预览时调用的图片地址
      dialogImageUrl: "",
      //用于图片回显
      fileList: [],
      //二级分类数组
      secondArr: [],
      //定义商品数组
      goodsArr: [],
    };
  },
  props: ["info"],
  computed: {
    ...mapGetters({
      catelist: "cate/getCateList",
      secklist: "seck/getSeck",
      goodsList:"goods/getGoodsList",
      Count:"goods/getCount"
    })
  },
  mounted() {
    //组件一加载就调用分类接口
    if (this.catelist.length == 0) {
      this.getCate();
    };
    console.log("挂载了");
    console.log(this.goodsArr,'商品');
    console.log(this.goodsList,'商品列表');
    
  },
  methods: {
    //一级分类获取二级分类事件
    changeCate(n) {
      let index = this.catelist.findIndex(
        item => item.id == this.seckInfo.first_cateid
      )
      this.secondArr = this.catelist[index].children;
      if (!n) {
        this.seckInfo.second_cateid = "";
      }
    },
    //二级分类获取商品事件
    changeSecond(){
      let index = this.catelist.findIndex(
          item => item.id == this.seckInfo.first_cateid
      )
      this.secondArr = this.catelist[index].children;
      let idx = this.secondArr.findIndex(
        item => item.id == this.seckInfo.second_cateid
      )
      let arr = this.goodsList
      let i = this.secondArr[idx].id
      this.goodsArr = arr.filter(item=>{
          if (item.second_cateid==i){
            return item
          }
      })
    },
    ...mapActions({
      getCate: "cate/getCateListAction",
      getCount: "goods/getCountAction",
      getSeck: "seck/getSeckAction"
    }),
    //关闭弹窗方法
    cancel() {
      this.$emit("cancel", false);
      //重置
      this.reset();
    },
    //清空表单内容以及相关验证
    reset() {
      this.seckInfo = {
        title: "", //限时秒杀名称
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        begintime: "", //开始时间
        endtime: "", //结束时间
        goodsid: "", //商品编号
        status: 1 //状态1正常2禁用
      };
    },
    // 查询数据
    lookup(id) {
      getSeckInfo({ id }).then(res => {
        if (res.code == 200) {
          this.seckInfo = res.list;
          this.seckInfo.id = id;
          //后端数据为字符串转为数组
          this.changeCate(true);
          this.changeSecond(true);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //确定事件
    confirm() {
      //验证
      this.$refs.seckInfo.validate(val => {
        if (val) {
          if (this.info.isAdd) {
            seckAdd(this.seckInfo).then(res => {
              if (res.code == 200) {
                this.cancel();
                this.getSeck();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            seckEdit(this.seckInfo).then(res => {
              if (res.code == 200) {
                this.cancel();
                this.getSeck();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          console.log(this.seckInfo, "活动表单");

          this.$message.error("验证失败");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
</style>

